<template>
  <div id="studentList">
    <el-tabs v-model="activeName"
             class="tabPlane">
      <el-tab-pane label="学生信息"
                   name='1'>
        <div class="contentClass onlyShowContent">
          <el-row :gutter="5">
            <el-col :span='2'>
              <el-select size='small'
                         v-model="selectCollege"
                         placeholder="所有学院"
                         value-key='id'
                         :clearable="collegeClear">
                <el-option v-for="item in collegeOptions"
                           :key="item.id"
                           :label="item.name"
                           :value="item">
                </el-option>
              </el-select>
            </el-col>
            <el-col :span='2'>
              <el-select size='small'
                         v-model="selectMajor"
                         placeholder="所有专业"
                         value-key='id'
                         clearable
                         @change="getClazzList">
                <el-option v-for="item in majorOptions"
                           :key="item.id"
                           :label="item.name"
                           :value="item">
                </el-option>
              </el-select>
            </el-col>
            <el-col :span='2'>
              <el-select size='small'
                         v-model="selectGrade"
                         placeholder="所有年级"
                         clearable
                         value-key="name"
                         @change="getClazzList">
                <el-option v-for="item in gradeOptions"
                           :key="item.id"
                           :label="item.name"
                           :value="item">
                </el-option>
              </el-select>
            </el-col>
            <el-col :span='2'>
              <el-select size='small'
                         v-model="selectClazz"
                         placeholder="所有班级"
                         clearable
                         value-key='id'>
                <el-option v-for="item in clazzOptions"
                           :key="item.id"
                           :label="item.name"
                           :value="item">
                </el-option>
              </el-select>
            </el-col>
            <el-col :span='2'>
              <el-select size='small'
                         v-model="selectNation"
                         placeholder="所有民族"
                         clearable
                         value-key='id'>
                <el-option v-for="item in nationOptions"
                           :key="item.id"
                           :label="item.name"
                           :value="item">
                </el-option>
              </el-select>
            </el-col>
            <el-col :span='2'>
              <el-select size='small'
                         v-model="selectPoliticsStatus"
                         placeholder="政治面貌"
                         clearable
                         value-key='id'>
                <el-option v-for="item in politicsStatusOptions"
                           :key="item.id"
                           :label="item.name"
                           :value="item">
                </el-option>
              </el-select>
            </el-col>
            <el-col :span='2'>
              <el-select size='small'
                         v-model="selectSex"
                         placeholder="所有性别"
                         clearable
                         value-key='id'>
                <el-option v-for="item in sexOptions"
                           :key="item.id"
                           :label="item.name"
                           :value="item">
                </el-option>
              </el-select>
            </el-col>
            <el-col :span='2'>
              <el-select size='small'
                         v-model="selectAbsentee"
                         placeholder="是否在籍"
                         clearable
                         value-key='id'>
                <el-option v-for="item in absenteelist"
                           :key="item.id"
                           :label="item.name"
                           :value="item.code">
                </el-option>
              </el-select>
            </el-col>
            <el-col :span='3'>
              <el-cascader size="small"
                           placeholder="所在地区"
                           clearable
                           :options="addressOptions"
                           :props="props"
                           v-model="selectAddress">
              </el-cascader>
            </el-col>
            <el-col :span='3'>
              <el-input v-model="keyword"
                        style="width:280px;"
                        size='small'
                        placeholder="输入学号、姓名、手机号、或身份证号搜索"></el-input>
            </el-col>
            <el-col :span='24'
                    style="margin-top:10px;">
              <!--<el-button type="primary" size="small" @click="resetSearch">重置</el-button>-->
              <el-button type="primary"
                         size="small"
                         @click="getManageStudentList('search')">查询</el-button>
              <el-button type="primary"
                         size="small"
                         @click="exportStudentList">导出</el-button>
              <el-button type="primary"
                         size="small"
                         :loading="exportPhotoBtn"
                         @click="beforeOpenDialog">照片下载</el-button>
              <!--<el-button type="primary" size="small" :loading="exportPhotoBtn" @click="selectCollege.name&&selectMajor.name&&selectGrade.name? beforeOpenDialog() : beforeOpenDialog()">照片下载</el-button>-->
              <span style="vertical-align:bottom;font-size: 14px">照片下载请精确至学院，专业，年级，否则无法批量下载</span>
            </el-col>
            <!-- 导出弹窗 -->
            <el-dialog title="提示"
                       :visible.sync="dialogExport"
                       width="30%"
                       :close-on-click-modal='false'
                       :show-close='false'>
              <span>正在导出，请耐心等待...</span>
              <span><i class="el-icon-loading"></i></span>
            </el-dialog>
            <!--照片下载弹窗-->
            <el-dialog title="照片下载"
                       :visible.sync="dialogTableVisible"
                       width="350px">
              <el-form>
                <el-form-item label="请选择下载照片类型："
                              :label-width="formLabelWidth">
                  <el-select v-model="selPhoto"
                             placeholder="请选择"
                             style="width: 150px">
                    <el-option label="入学照片"
                               value="1"></el-option>
                    <el-option label="生活照片"
                               value="2"></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
              <div slot="footer"
                   class="dialog-footer">
                <el-button @click="dialogTableVisible = false">取 消</el-button>
                <el-button type="primary"
                           @click="photoDownload">确 定</el-button>
              </div>
            </el-dialog>
            <el-col :span='24'
                    style="margin-top:20px;">
              <el-table :data="studentTableData"
                        @sort-change="sortChange">
                <el-table-column label="序号"
                                 fixed="left"
                                 width="50">
                  <template slot-scope="scope">
                    {{scope.$index+1}}
                  </template>
                </el-table-column>
                <el-table-column v-for="(tableValue,index) in this.tablehead"
                                 :key="index"
                                 :label="tableValue.label"
                                 :prop="tableValue.prop"
                                >
                <!-- :fixed='fixed(tableValue.prop)'  min-width="190" sortable="custom" -->
                </el-table-column>
                <el-table-column label="操作"
                                 fixed="right"
                                 width="150">
                  <template slot-scope="scope">
                    <el-button type="text"
                               @click="saveSearchLimit(scope.row)"
                               style="margin-right: 10px;">查看</el-button>
                    <router-link class="routerlink"
                                 target="_blank"
                                 :to="{name:'printPreview',query:{sn:scope.row.sn,type:'1'}}"
                                 style="margin-right: 10px;">打印预览</router-link>
                    <!-- <el-button type="text"
                               @click="resetpassword(scope.row.sn)">重置密码</el-button> -->
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
            <!-- <el-col :span="2"
                    class="mt20">
              <el-button type="text"
                         @click="dialogVisible = true">自定义表头展示</el-button>
            </el-col> -->
            <el-col :span="22"
                    align="center"
                    class="mt20">
              <el-pagination @size-change="handleSizeChange"
                             @current-change="handleCurrentChange"
                             :current-page="page"
                             :page-sizes="[10, 20, 30, 40,50,100]"
                             :page-size="size"
                             layout="total, sizes, prev, pager, next, jumper"
                             :total="total">
              </el-pagination>
            </el-col>
          </el-row>
          <!-- 密码重置弹窗 -->
          <el-dialog title="重置密码"
                     :visible.sync="dialogresetpassword"
                     width="30%">
            <el-input v-model="resetpasswordinput"
                      placeholder="请输入新密码"
                      width="100%"
                      size="small"></el-input>
            <el-row type="flex"
                    justify="center">
              <el-col :span="8">
                <el-button type="primary"
                           @click="confirmresetpassword"
                           size="small"
                           style="width:150px"
                           class="mt20">确 定</el-button>
              </el-col>
            </el-row>
          </el-dialog>
          <!-- 密码重置成功弹窗 -->
          <el-dialog title="重置密码成功  "
                     :visible.sync="dialogresetpasswordsuccess"
                     width="30%"
                     :close-on-click-modal="false">
            <el-row>
              <el-col :span="24">新的密码：{{ resetpasswordinput }}</el-col>
              <el-col :span="24"
                      class="mt20 mb20">请及时通知该学生密码发生改变</el-col>
            </el-row>
          </el-dialog>
          <!-- 自定义表头弹窗 -->
          <el-dialog title="自定义表头展示"
                     :visible.sync="dialogVisible"
                     width="860px"
                     style="padding:0 20px">
            <div>
              <h3 class="mb10">基本信息</h3>
              <el-checkbox-group v-model="checkList">
                <el-checkbox v-for="(BasicInformation,index) in this.customSelectionlists.基本信息"
                             :key="index"
                             :disabled="disabled(BasicInformation.field_name)"
                             @change="handleCheckAllChange(BasicInformation.name)"
                             :label="BasicInformation.field_name">
                  {{BasicInformation.name}}</el-checkbox>
              </el-checkbox-group>
              <h3 class="mb10 mt20">学籍信息</h3>
              <el-checkbox-group v-model="checkList">
                <el-checkbox v-for="(studentStatusInformation,index) in this.customSelectionlists.学籍信息"
                             :key="index"
                             @change="handleCheckAllChange(studentStatusInformation.name)"
                             :label="studentStatusInformation.field_name">{{studentStatusInformation.name}}</el-checkbox>
              </el-checkbox-group>
              <h3 class="mb10 mt20">入学信息</h3>
              <el-checkbox-group v-model="checkList">
                <el-checkbox v-for="(admissionInformation,index) in this.customSelectionlists.入学信息"
                             :key="index"
                             @change="handleCheckAllChange(admissionInformation.name)"
                             :label="admissionInformation.field_name">{{admissionInformation.name}}</el-checkbox>
              </el-checkbox-group>
              <h3 class="mb10 mt20">通讯信息</h3>
              <el-checkbox-group v-model="checkList">
                <el-checkbox v-for="(communicationInformation,index) in this.customSelectionlists.通讯信息"
                             :key="index"
                             @change="handleCheckAllChange(communicationInformation.name)"
                             :label="communicationInformation.field_name">{{communicationInformation.name}}</el-checkbox>
              </el-checkbox-group>
            </div>
            <hr class="mt20 mb10">
            <p>已选字段：{{ checkList.length }}个（列表表头的排序将以选择的顺序排序）</p>
            <el-tag :key="tag"
                    v-for="tag in tagnamelist"
                    :closable="show(tag)"
                    :disable-transitions="false"
                    @close="handleClose(tag)">
              {{tag}}
            </el-tag>
            <span slot="footer"
                  class="dialog-footer">
              <el-button @click="dialogVisible = false"
                         size="small">取 消</el-button>
              <el-button type="primary"
                         size="small"
                         @click="gettablehead">确 定</el-button>
            </span>
          </el-dialog>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import { routerPrevName, downLoadFiles, downLoadStream } from '@/tools/utils'
import { common, dataDictionary } from '@api/index'
export default {
  name: 'studentList',
  data () {
    return {
      dialogresetpassword: false,
      dialogresetpasswordsuccess: false,
      resetpasswordinput: '',
      resetpasswordsn: '',
      userType: parseInt(this.$store.state.user.type),
      customSelectionlists: [],
      customTitleList: [],
      customSelectionlists1: [],
      checkList: ['sn', 'name', 'gradeId', 'major', 'classes', 'nation_id', 'gender_id', 'current_domicile_place_code', 'instructor'],
      // checkList: [],
      tablehead: [],
      sort: '',
      file: '',
      tagnamelist: ['学号', '姓名', '所属年级', '所属专业', '所属班级', '民族', '性别', '现在户口所在地', '辅导员姓名'],
      // tagnamelist: [],
      activeName: '1',
      keyword: '',
      // 学院
      selectCollege: {
        sn: '',
        name: ''
      },
      collegeOptions: [],
      // 专业
      selectMajor: {
        sn: '',
        name: ''
      },
      majorOptions: [],
      // 年级
      selectGrade: {
        id: '',
        name: ''
      },
      gradeOptions: [],
      // 班级
      selectClazz: {
        sn: '',
        name: ''
      },
      clazzOptions: [],
      nativePlaceOptions: [],
      // 民族
      selectNation: {
        id: '',
        name: ''
      },
      nationOptions: [],
      // 政治面貌
      selectPoliticsStatus: {
        id: '',
        name: ''
      },
      politicsStatusOptions: [],
      // 性别
      selectSex: {
        id: '',
        name: ''
      },
      sexOptions: [],
      // 是否在籍
      selectAbsentee: '',
      absenteelist: [
        {
          code: 1,
          name: '在籍'
        },
        {
          code: 0,
          name: '不在籍'
        }
      ],
      // 所在地区
      selectAddress: [],
      addressOptions: [],
      props: {
        value: 'value',
        checkStrictly: true
      },
      // 学生列表信息
      studentTableData: [],
      page: 1,
      size: 10,
      total: 0,
      exportLoading: false,
      dialogTableVisible: false,
      formLabelWidth: '150px',
      selPhoto: '',
      exportPhotoBtn: false,
      dialogVisible: false,
      // 导出数据弹窗
      dialogExport: false
    }
  },
  computed: {
    toRouter () {
      return `${routerPrevName(this.userType)}_studentDetailInfo`
    },
    collegeClear () {
      if (this.userType === 3 || this.userType === 4) {
        return false
      } else {
        return true
      }
    },
    parmas () {
      return {
        collegeCode: this.selectCollege.sn ? this.selectCollege.sn : '', // 学院编号
        majorCode: this.selectMajor.sn ? this.selectMajor.sn : '', // 专业编号
        displayField: this.checkList, // 选择显示字段
        isNationality: this.selectAbsentee, // 是否在籍
        gradeId: this.selectGrade.id ? this.selectGrade.id : '', // 年级id
        classCode: this.selectClazz.sn ? this.selectClazz.sn : '', // 班级编号
        nationId: this.selectNation.id ? this.selectNation.id : '', // 民族 - 数据字典id
        politicalStatusId: this.selectPoliticsStatus.id ? this.selectPoliticsStatus.id : '', // 政治面貌 - 数据字典id
        genderId: this.selectSex.id ? this.selectSex.id : '', // 性别 - 数据字典id
        familyPlaceCode: this.selectAddress.join(':'), // 所在地区编号 - 使用冒号拼接
        keyword: this.keyword, // 关键字:学号,姓名,身份证号,手机号
        pgCt: this.page,
        pgSz: this.size,
        sortVo: {
          'field': this.file,
          'sort': this.sort
        }
      }
    }
  },
  watch: {
    selectCollege: {
      handler (newval, oldval) {
        if (newval && JSON.stringify(newval) !== JSON.stringify(oldval)) {
          if (this.$route.params.hasOwnProperty('isgoback')) {
            this.getMajorsList('watch')
          } else {
            this.getMajorsList('watch')
          }
        }
      },
      deep: true
    }
  },
  mounted () {
    this.initPage()
    dataDictionary()._getAll().then(res => {
      if (res.status) {
        this.nationOptions = res.data['民族']
        this.politicsStatusOptions = res.data['政治面貌']
        this.sexOptions = res.data['性别']
      }
    })
  },
  methods: {
    initPage () {
      if (this.$route.params.hasOwnProperty('isgoback')) {
        this.getSessionSearchLimits()
      }
      // this.getManageStudentList()
      this.getAllCollege()
      this.getGradesList()
      this.getAddress()
      this.findAllCustomSelection()
      this.gettablehead()
    },
    // 获取session存储的查询条件
    getSessionSearchLimits () {
      let sessionSearchKey = window.sessionStorage.getItem('searchKey')
      if (sessionSearchKey) {
        let sessionSearchKeyJson = JSON.parse(sessionSearchKey)
        console.log(sessionSearchKeyJson)
        this.selectCollege = sessionSearchKeyJson.selectCollege
        this.selectMajor = sessionSearchKeyJson.selectMajor
        this.selectGrade = sessionSearchKeyJson.selectGrade
        this.selectClazz = sessionSearchKeyJson.selectClazz
        this.selectNation = sessionSearchKeyJson.selectNation
        this.selectAbsentee = sessionSearchKeyJson.selectAbsentee
        this.selectPoliticsStatus = sessionSearchKeyJson.selectPoliticsStatus
        this.selectSex = sessionSearchKeyJson.selectSex
        this.selectAddress = sessionSearchKeyJson.selectAddress
        this.keyword = sessionSearchKeyJson.keyword
        if (this.selectCollege !== '' && this.selectCollege) {
          this.getMajorsList('watch')
        }
        if (this.selectMajor !== '' && this.selectMajor) {
          this.getClazzList('watch')
        }
      }
    },
    // 保存查询条件
    saveSearchLimit (rowData) {
      let searchLimits = {
        selectCollege: this.selectCollege,
        selectMajor: this.selectMajor,
        selectGrade: this.selectGrade,
        selectClazz: this.selectClazz,
        selectNation: this.selectNation,
        selectAbsentee: this.selectAbsentee,
        selectPoliticsStatus: this.selectPoliticsStatus,
        selectSex: this.selectSex,
        selectAddress: this.selectAddress,
        keyword: this.keyword
      }
      window.sessionStorage.setItem('searchKey', JSON.stringify(searchLimits))
      this.$router.push({ name: this.toRouter, query: { sn: rowData.sn } })
    },
    // 获取学生列表
    async getManageStudentList (paramsType = null) {
      this.dialogVisible = false
      if (paramsType === 'search') {
        this.page = 1
        this.size = 10
        this.total = 0
      }
      let loading = this.$loading({
        target: '.el-table__body'
      })
      let res = await new Promise((resolve) => {
        common()._getStudentList(
          this.parmas
        ).then(res => {
          loading.close()
          this.studentTableData = []
          if (res.status && res.data.content) {
            this.total = res.data.totalPages
            console.log(res.data.content)
            this.studentTableData = res.data.content
            // res.data.content.forEach(item => {
            //   let obj = {}
            //   item.forEach(childItem => {
            //     this.$set(obj, childItem.code, childItem.value)
            //   })
            //   this.studentTableData.push(obj)
            // })
          }
          resolve()
        })
      })
      return res
    },
    // 照片下载弹窗事件
    beforeOpenDialog () {
      if (!(this.selectCollege.name && this.selectMajor.name && this.selectGrade.name)) {
        this.$message.warning('请选择学院，专业，年级')
        return
      }

      this.exportPhotoBtn = true
      this.getManageStudentList().then(res => { // 先刷新
        this.dialogTableVisible = true// 弹窗状态
        this.exportPhotoBtn = false// 按钮状态
      })
    },
    // 照片下载
    photoDownload () {
      if (!this.selPhoto) this.$message.warning('请选择类型')
      this.dialogTableVisible = false
      const url = `/api/managerInfo/downloadPhotos/${this.selPhoto}`
      const fileName = this.selPhoto === '1' ? '入学照片.zip' : '生活照片.zip'
      const before = res => {
        this.$notify({
          title: '警告',
          message: '当前照片正在下载， 请勿关闭浏览器！',
          type: 'warning',
          duration: 5000
        })
      }
      const callBack = message => {
        if (!message) { // 下载成功
          this.$message.success('下载成功')
        } else { // 下载失败
          this.$alert(message, '下载失败', {
            confirmButtonText: '返回',
            callback: action => {
            }
          })
        }
      }
      downLoadStream(url, this.parmas, fileName, before, callBack)
    },
    // 导出
    exportStudentList () {
      this.dialogExport = true
      this.getManageStudentList().then(res => { // 先刷新
        let params = {
          collegeCode: this.selectCollege.sn, // 学院编号
          majorCode: this.selectMajor.sn, // 专业编号
          gradeId: this.selectGrade.id, // 年级id
          classCode: this.selectClazz.sn, // 班级编号
          nationId: this.selectNation.id, // 民族 - 数据字典id
          politicalStatusId: this.selectPoliticsStatus.id, // 政治面貌 - 数据字典id
          genderId: this.selectSex.id, // 性别 - 数据字典id
          familyPlaceCode: this.selectAddress.join(':'), // 所在地区编号 - 使用冒号拼接
          keyword: this.keyword, // 关键字:学号,姓名,身份证号,手机号
          pgCt: this.page,
          pgSz: this.size
        }
        let callBack = message => {
          if (!message) { // 下载成功
            this.$message.success('下载成功')
            this.dialogExport = false
          } else { // 下载失败
            this.dialogExport = false
            this.$alert(message, '下载失败', {
              confirmButtonText: '返回',
              callback: action => {
              }
            })
          }
        }
        downLoadFiles(`./api/managerInfo/export`, params, '学生信息.xls', callBack)

        // common()._managerExport(// 再导出
        //   {
        //     collegeCode: this.selectCollege.sn, // 学院编号
        //     majorCode: this.selectMajor.sn, // 专业编号
        //     gradeId: this.selectGrade.id, // 年级id
        //     classCode: this.selectClazz.sn, // 班级编号
        //     nationId: this.selectNation.id, // 民族 - 数据字典id
        //     politicalStatusId: this.selectPoliticsStatus.id, // 政治面貌 - 数据字典id
        //     genderId: this.selectSex.id, // 性别 - 数据字典id
        //     familyPlaceCode: this.selectAddress.join(':'), // 所在地区编号 - 使用冒号拼接
        //     keyword: this.keyword, // 关键字:学号,姓名,身份证号,手机号
        //     pgCt: this.page,
        //     pgSz: this.size
        //   }
        // ).then(res => {
        //   if (res.status && res.data) {
        //     this.exportLoading = false
        //     downloadFile('学生信息', `./api/common/downloadFile?path=${res.data}&name=学生信息列表.xlsx`)
        //   } else {
        //     this.exportLoading = false
        //   }
        // }).catch(res => {
        //   this.exportLoading = false
        // })
      })
    },

    // 获取所有学院列表
    getAllCollege () {
      common()._getAllCollege().then(res => {
        this.collegeOptions = []
        if (res.status) {
          this.collegeOptions.push(...res.data)
          if ((this.userType === 3 || this.userType === 4) && res.data.length === 1) {
            this.selectCollege = res.data[0]
          }
        }
      })
    },
    // 获取专业列表
    getMajorsList (type = null) {
      if (type !== 'watch') {
        this.selectMajor = { id: '', name: '' }
        this.selectClazz = { id: '', name: '' }
      }

      if (this.selectCollege === null) {
        this.selectCollege = { id: '', name: '' }
      }
      if (!this.selectCollege.id) {
        this.majorOptions = []
        this.clazzOptions = []
        return false
      }
      common()._getMajordByCollege(this.selectCollege.id).then(res => {
        this.majorOptions = []
        if (res.status) {
          this.majorOptions.push(...res.data)
        }
      })
    },
    // 获取所有年级
    getGradesList () {
      common()._getAllGrades().then(res => {
        this.gradeOptions = []
        if (res.status) {
          this.gradeOptions.push(...res.data)
        }
      })
    },
    // 获取班级
    getClazzList (type = null) {
      if (this.selectMajor === null) {
        this.selectMajor = { id: '', name: '' }
      }
      if (type !== 'watch') {
        this.selectClazz = { id: null, name: null }
      }
      if (!this.selectMajor.id) {
        this.clazzOptions = []
        return
      }
      if (this.selectMajor.id && this.selectGrade.id) {
        common()._getClassesByMajorAndGrade(this.selectMajor.id, this.selectGrade.name).then(res => {
          this.clazzOptions = []
          if (res.status) {
            this.clazzOptions.push(...res.data)
          }
        })
      } else if (this.selectMajor.id) {
        common()._getClazzByMajor(this.selectMajor.id).then(res => {
          this.clazzOptions = []
          if (res.status) {
            this.clazzOptions.push(...res.data)
          }
        })
      }
    },
    // 获取所在地区列表
    getAddress () {
      common()._getProvincesAll().then(res => {
        if (res.status) {
          this.addressOptions = res.data
        }
      })
    },
    // 获得全部动态选择展示字段
    findAllCustomSelection () {
      common()._findAllCustomSelection().then(res => {
        if (res.status) {
          this.customSelectionlists = res.data
        }
      }
        // console.log(res.data)
      )
    },
    // 重置密码
    resetpassword (val) {
      this.dialogresetpassword = true
      this.resetpasswordsn = val
      this.resetpasswordinput = ''
    },
    confirmresetpassword () {
      let re = /^[\w]{6,16}$/
      let params = {
        sn: this.resetpasswordsn,
        newPassword: this.resetpasswordinput
      }
      if (re.test(this.resetpasswordinput)) {
        common()._updatePassWord(params).then(res => {
          if (res.status) {
            this.dialogresetpassword = false
            this.dialogresetpasswordsuccess = true
          }
        })
      } else {
        this.$message.warning('请输入6-16位的英文或数字')
      }
    },
    handleSizeChange (val) {
      this.size = val
      this.page = 1
      this.getManageStudentList()
    },
    handleCurrentChange (val) {
      this.page = val
      this.getManageStudentList()
    },
    handleClose (tag) {
      this.checkList.splice(this.tagnamelist.indexOf(tag), 1)
      this.tagnamelist.splice(this.tagnamelist.indexOf(tag), 1)
    },
    handleCheckAllChange (val) {
      if (this.tagnamelist.includes(val)) {
        this.tagnamelist.splice(this.tagnamelist.indexOf(val), 1)
      } else {
        this.tagnamelist.push(val)
      }
      // console.log('选择列表：' + this.checkList)
      // console.log('tag列表：' + this.tagnamelist)
    },
    sortChange (param) {
      if (param.order === 'descending') {
        this.sort = 'desc'
      } else if (param.order === 'ascending') {
        this.sort = 'asc'
      }
      this.file = param.prop
      this.getManageStudentList()
    },
    gettablehead () {
      this.dialogVisible = false
      this.tablehead = []
      for (let i = 0; i < this.checkList.length; i++) {
        var tablelist = {}
        tablelist.prop = this.checkList[i]
        tablelist.label = this.tagnamelist[i]
        this.tablehead.push(tablelist)
      }
      this.getManageStudentList()
    },
    // 标签是否显示删除按钮
    show (val) {
      if (val === '学号' || val === '姓名') {
        return false
      } else {
        return true
      }
    },
    // 是否固定表头
    fixed (val) {
      if (val === 'sn' || val === 'name') {
        return 'left'
      } else {
        return false
      }
    },
    // 禁用学号，姓名
    disabled (val) {
      if (val === 'sn' || val === 'name') {
        return true
      } else {
        return false
      }
    }
  }
}
</script>
<style scoped lang="less">
.el-tag {
  background-color: #e4e4e4;
  padding: 0 10px;
  height: 25px;
  line-height: 25px;
  font-size: 14px;
  color: black;
  border-radius: 5px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid rgba(64, 158, 255, 0.2);
  white-space: nowrap;
  margin: 10px 10px 0 0;
}
/deep/ .el-checkbox__inner {
  background-color: #e4e4e4;
}

/deep/.el-tag:hover .el-icon-close {
  /* display: inline-block; */
  opacity: 1;
}
/deep/.el-tag .el-icon-close {
  /* display: none; */
  opacity: 0;
}

/deep/.el-table th {
  border-left: 1px solid #fff;
}
</style>
